<template>
	<nav-header :title="'会议室(' + data.pageTotal + ')'">
    <view class="bg-white pt-4">
      <view class="flex-1">
        <u-search placeholder="搜索你想要查找的信息" v-model="siteNameSearch" :clearable="true"
                  :custom-style="{backgroundColor: '#ffffff',paddingLeft: '12px',borderRadius: '36px'}"
                  @clear="searchData(siteNameSearch)" @confirm="searchData(siteNameSearch)" @search="searchData(siteNameSearch)"/>
      </view>
    </view>


    <view class="px-4 bg-white" v-if="dictCode != ''">
      <u-tabs :list="tabList" :activeStyle="{color: '#333333',transform: 'scale(1.05)'}"
              :inactiveStyle="{ color: '#999999',transform: 'scale(1)'}"
              itemStyle="width: 25%;height: 44px;align: center;padding-left: 0px; padding-right: 0px;"
              lineWidth="0" @click="(item)=>{
					code = item.val
					searchData(siteNameSearch)
				}"></u-tabs>
    </view>
    <my-page ref="mypage" v-model="dataList" :height="system.screenHeight - system.statusBarHeight - 88" :contentClass="['pt-4']" @load-data="loadData">
      <template slot="content">
        <view class="pt-4">
        <view v-for="(item,index) in dataList" :key="index" class="bg-white flex mx-4 mb-4 py-4 px-2 rounded-lg"
              @click="$util.myNavigateTo('/pages_home/map_detail?type=' + type + '&id=' + item.id)">
          <view v-if="item.onGoing" class="absolute top-0 left-0 px-2 py-1 rounded-tl-lg rounded-br-lg text-white" style="background-color: rgba(0,0,0,0.4);">进行中</view>
          <view class="relative" style="width: 120px;">
            <u-image :src="$util.formatImageIdUrl(item.cover)" width="100%" height="100px" radius="8"
                     :mode="item.cover? 'aspectFill':'heightFix'"></u-image>
          </view>
          <view class="pl-3 flex flex-col justify-between" style="width: calc(100% - 120px);">
            <view class="text-black-33 font-bold zx-multi-ellipsis--2" v-text="item.name"></view>
            <view class="leading-6">
              <view class="flex items-center text-gray-99 text-sm">
                <text class="text-gray-66" v-text="'开放时间：'+item.startHours + '-' + item.endHours"></text>
              </view>
              <view class="flex text-sm text-gray-99">
                <view class="flex items-center mr-4">
                  <text class="pt-0_5" v-text="'可容纳人数：'+item.accommodate"></text>
                </view>
              </view>
              <view class="flex items-center text-gray-99 text-sm">
                <text class="zx-ellipsis" v-text="'位置：'+item.address"></text>
              </view>
            </view>
          </view>
        </view>
        </view>
      </template>
    </my-page>
	</nav-header>
</template>

<script>
	import {mapState} from 'vuex'
	import MyPage from '@/components/my_page1.vue'
	import NavHeader from '@/components/nav_header.vue'
	import * as siteApi from '@/interface/junchuang/site.js'
	export default {
		components: {
			NavHeader,MyPage
		},
		data() {
			return {
				type: '',
				platform: '',
				selectId: '',
				listShow: true,
				siteNameSearch: '',
				dataList: [],
				data: {pageTotal: 0},
				markers: [],
				markerStyle: {
					color: '#d9982b',
					iconPath: '/pages_home/static/marker.png'
				}
			}
		},
		computed: {
			...mapState({
				user: state => state.user,
				system: state => state.system
			})
		},
		onLoad(e) {
			const v = this,{areaId, areaName} = v.system
			v.type = e.type
			wx.getSystemInfo({
				success: function(res) {
					v.platform = res.platform
				}
			})

		},
		onReady() {
			const v = this
			if (v.type == 'office') {
				v.markerStyle.color = '#2d58cb'
				v.markerStyle.iconPath = '/pages_home/static/marker_red.png'
			}
			v.initMarker()
		},
		methods: {
			searchData (val) {
				this.initMarker()
				this.$refs['mypage'].dataReload()
			},
			initMarker () {
				const v = this;
				v.markers = []
				let data = {
					name: v.siteNameSearch,
					pageNum: 1,
					pageSize: 100,
				}
				let httpRes = siteApi.getSitePageList(data)
				httpRes.then(res=>{
					res.data.rows.forEach((item,index)=>{
						if (item.lat && item.lon) {
							v.markers.push({
								id: index,
								logicId: item.id,
								iconPath: v.markerStyle.iconPath,
								label: {
									anchorY: v.platForm == 'android'? 0:-68,
									padding: v.platForm == 'android'? 0:8,
									color: v.markerStyle.color,
									textAlign: 'center',
									content: v.$util.mySubStr(item.name, 8),
									bgColor: '#fff',
									borderRadius: 6,
								}, latitude: item.lat,longitude: item.lon, width: 32, height: 32})
						}
					})
          v.dataList = res.data.rows
          console.log("res.data.rows",res.data.rows)
				}).catch(e=>{
					console.log(e)
				})
			},

			loadData(page, success, error){
				const v = this;
				Object.assign(v.data, page, {
					name: v.siteNameSearch,
				})
				let httpRes = siteApi.getSitePageList(v.data)
				httpRes.then(res=>{
					v.data.pageTotal = res.data.total || 0
					success(res)
				}).catch(error)
			},
			markertap (e) {
				const {logicId, latitude, longitude} = this.markers[e.markerId]
				this.selectId = logicId
				this.center = [latitude, longitude]
				this.$util.myNavigateTo('/pages_home/map_detail?type=' + this.type + '&id=' + logicId)
			},

		}
	}
</script>

<style>
	.selectSite_yellow {
		background-image: linear-gradient(to right, #ffffff 45%,  #fdd796 100%);
	}

	.selectSite_green {
		background-image: linear-gradient(to right, #ffffff 45%,  #bdd1be 100%);
	}
</style>
